<template>
  <div class="container">
    <canvas id="canvas"></canvas>
  </div>
</template>

<script>
import { Drawer } from 'element-ui';
export default {
  name: "my-clock",
  data() {
    return {
      cvs: null,
      ctx: null,
      time: "",
    };
  },
  methods: {
    init() {
      this.cvs = document.getElementById("canvas");
      this.cvs.width = document.body.clientWidth;
      this.cvs.height = document.body.clientHeight;
      this.ctx = this.cvs.getContext("2d");
      this.ctx.textAlign = 'center'
      this.ctx.textBaseline = 'middle';
      this.ctx.font = "136px Arial";
      this.ctx.fillStyle = "#000";
      this.draw()
    },
    draw(){
        this.ctx.clearRect(0,0,this.cvs.width,this.cvs.height);
        this.time = new Date().toTimeString().slice(0, 8);
        this.ctx.fillText(this.time,this.cvs.width / 2, this.cvs.height / 2);
        requestAnimationFrame(this.draw);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
};
</script>
<style lang="less">
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
